<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for指令的使用</title>
</head>
<body>
<div id="app">
    <h2 v-text="msg"></h2>
    <!--
        v-for：用来对vue实例中数据进行遍历
    -->
    <h1>遍历对象</h1>
    <h2 v-for="(value,key,index) in user">
        index:{{index}} key:{{key}} value:{{value}}
    </h2>

    <h1>遍历数组</h1>
    <h2 v-for="school in schools">
        {{school}}
    </h2>

    <h1>遍历对象数组</h1>
    <h2 v-for="item in users" :key="item.id"> <!--:key vue官方文档建议，保证数据的唯一-->
        {{item.name}}
    </h2>
</div>
</body>
</html>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: "hello vue",
            user: {name: "小王", age: 23, birthday: "2021-4-14"},
            schools: ["北京大学", "天津大学", "浙江大学", "南京大学"],
            users: [
                {id: "1", name: "小王", age: 21, bir: "2021-4-4"},
                {id: "2", name: "小朱", age: 24, bir: "2021-4-12"},
                {id: "3", name: "小红", age: 18, bir: "2021-4-8"},
            ]
        },
        methods: {}
    })
</script>